<template>
    <div class="addcont">
        <!-- <h1 style="text-align: center;">添加类目</h1> -->
        <div class="bg"></div>
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="formdata" :rules="rules" label-width="auto">
            <el-form-item label="类目名称" prop="cname">
                <el-input v-model="formdata.cname" />
            </el-form-item>
            <el-form-item label="类目图片" prop="cimg">
                <el-input v-model="formdata.cimg" />
                <Tuku v-model="formdata.cimg"></Tuku>
            </el-form-item>
            <el-form-item label="类目排序" prop="seq">
               
                <el-input-number v-model="formdata.seq" :min="1" :max="10" />
            </el-form-item> 
            <el-form-item label="父目录ID" prop="parentId">
                <!-- <el-input v-model="formdata.parentId" /> -->
                <el-tree-select v-model="formdata.parentId" :data="categorydata" 
                check-strictly style="width: 240px" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    提交
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import Tuku from '../../components/Tuku.vue'
import { CategoryApi } from '../../api'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
const router = useRouter()

const ruleFormRef = ref ()
const formdata = reactive({
    cname: '',
    cimg: '',
    seq: '',
    parentId:''
})
const rules = reactive ({
    cname: [
        { required: true, message: '请输入正确的类目名称字符不能超过10个', trigger: 'blur' },
        { min: 2, max: 10, message: '类目名称字符区间2 to 10字符', trigger: 'blur' },
    ],
})

//父目录
const categorydata = ref([
    {
        value: 0,
        label: '一级目录',
        
    },
])

onMounted(() => { 
    CallCategoryApi()
})
const CallCategoryApi = () => { 
    CategoryApi.select.call().then(res => { 
        res.forEach(item => { 
            // categorydata.value[0].children.push({
            //     label: item.cname,
            //     value:item.id
            // })
            item.label = item.cname
            item.value = item.id

            // console.log(item);

        })
        // 高阶函数
        let categorydata2 = res.reduce((newArray, currValue) => { 
            // console.log(currValue);
            currValue.children = res.filter(item => {
                return item.parentId === currValue.id
            })
            console.log(currValue);
            if (currValue.parentId === 0) { 
                newArray.push(currValue)
            }
            return newArray
        }, [])
        console.log(categorydata2);
        categorydata.value = categorydata2

})
}


const formsubmit = () => { 
    CategoryApi.insert.call({
        cname: formdata.cname,
        cimg: formdata.cimg,
        seq: formdata.seq,
        parentId:formdata.parentId
    }).then(res => { 

    })
}

const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            formsubmit()
            ElMessage.success('添加成功')
            router.push('/category/list')
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped>
.addcont{
    width: 60%;
    height: 100%;
    background-color: rgb(234, 237, 237);
    margin: 0 auto;
    border-radius: 15px;
    /* text-shadow: 2px 2px rgb(222, 219, 219); */
    box-shadow: 0 5px 15px rgba(153, 176, 102, 0.3);/* 添加阴影 */
}
.bg{
    width: 100%;
    height: 120px;
   background: url(../../assets/addbg.jpeg) no-repeat;
   /* margin-left: 4px;
   margin-top: 4px; */
    border-radius: 13px;

}
.el-form{
    margin: 0 auto;
    padding-top: 30px;
}
.el-button{
    margin-top: 20px;
}
</style>